<ion-navbar *navbar class="my-navbar">
  <ion-title>
    购物车
  </ion-title>
</ion-navbar>

<ion-content class="shoppingcart">
    <div class="msg" *ngIf="!cart">
        暂未添加商品
    </div>
    <div *ngIf="cart">
        <div class="summary">
            <div class="row content">
              <div class="col col-33 left">总额</div>
              <div class="col col-67 right">{{cart.totalAmount | currency:'CNY' | cny}}</div>
            </div>
            <div class="row content">
              <div class="col col-33 left">商品</div>
              <div class="col col-67 right">{{cart.amount | currency:'CNY' | cny}}</div>
            </div>
            <div class="row content">
              <div class="col col-33 left">运费</div>
              <div class="col col-67 right">{{cart.freight | currency:'CNY' | cny}}</div>
            </div>
        </div>
    
        <div class="detail">
            <div class="list-with-price">
                <div *ngFor="#item of cart.items" class="cart-item">
                  <div class="left">
                        <img (click)="showProdcut(item.productId)" src="{{item.image | imgPath}}">
                  </div>
                  
                  <div class="right">
                      <h2 (click)="showProdcut(item.productId)" class="text-color-light-grey">{{item.name}}</h2>
	                  <p class="text-thin text-color-light-grey">{{item.unitPrice | currency:'CNY' | cny}}</p>
	                  <div class="clear-both"></div>
	                  <div class="my-box text-thin text-color-light-grey">
	                    <div class="line">
	                        <span class="line-left">
	                            <span class="my-label">
	                                数量
	                            </span>
	                            <span class="my-input">
	                                <input type="text" ng-model="item.qty" ng-change="qtyChange(item)">
	                            </span>
	                        </span>
	                        
	                        <span class="line-right" (click)="remove(item)">
	                            <ion-icon name="ios-trash-outline"></ion-icon>
	                        </span>
	                    </div>
	                  </div>
                  </div>
                </div>
           </div>
        </div>
   </div>
</ion-content>

<ion-toolbar *ngIf="cart" white position="bottom" class="bottom-toolbar">
    <div class="bottom-buttons">
      <div class="buttons orange">
            <button clear class="button half" ng-click="checkout()">
              结算
            </button>
       </div>
       
       <div class="buttons blue" ng-click="addToShoppingcart(product)">
            <button clear class="button  half" ng-click="clear()">
              清空
            </button>
       </div>
   </div>
</ion-toolbar>
